<!--保存按钮组件-->
<template>

  <!--
  common:{
          home:"首页",
          edit:"编辑",
          detail:"详情",
          delete:"删除",
          submit:"提交",
          add:"添加",
          search:"搜索",
          backTo:"返回"
      }

  -->
  <span style="margin-left: 10px">
    <!--返回-->
     <el-button :icon="icon" v-if="type==='backTo'" :type="styleType" size="mini">{{
         $t("common.backTo")
       }}</el-button>
    <!--搜索-->
     <el-button :icon="icon" v-if="type==='search'" :type="styleType" size="mini">{{
         $t("common.search")
       }}</el-button>
    <!--提交-->
    <el-button :icon="icon" v-if="type==='submit'" :type="styleType" size="mini">{{
        $t("common.submit")
      }}</el-button>
    <!--添加-->
    <el-button :icon="icon" v-if="type==='add'" :type="styleType" size="mini">{{ $t("common.add") }}</el-button>

    <!--详情-->
     <el-tooltip v-if="type==='detail'" class="item" effect="dark" :content='$t("common.detail")' placement="top-start"
                 :enterable="false">
              <el-button icon="el-icon-help" size="mini"></el-button>
     </el-tooltip>
    <!--编辑-->
    <el-tooltip v-if="type==='edit'" class="item" effect="dark" :content='$t("common.edit")' placement="top-start"
                :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
    </el-tooltip>
    <!--删除-->
    <el-tooltip v-if="type==='delete'"  class="item" effect="dark" :content='$t("common.delete")' placement="top-start"
                :enterable="false">
              <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
    </el-tooltip>


  </span>

</template>

<script>
export default {
  props: ['btnIcon', 'btnType', 'cssType'],
  name: "editBox",
  data() {
    return {
      type: "",
      icon: "",
      styleType: ""
    }
  },
  watch: {
    btnIcon: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.icon = newValue
        }
      },
      deep: true,
      immediate: true
    },
    btnType: {
      handler(newValue, oldValue) {
        // debugger
        this.type = newValue
      },
      deep: true,
      immediate: true
    },
    cssType: {
      handler(newValue, oldValue) {
        // debugger
        this.styleType = newValue
      },
      deep: true,
      immediate: true
    }
  },


}
</script>

<style scoped>


</style>
